<script setup>
import { ref, onMounted } from "vue";
import linkCard from "./components/linkCard.vue";
import { queryFriendLinks } from "@/api/common.js";

const links = ref([]);
onMounted(() => {
  getList();
});

const getList = async () => {
  const res = await queryFriendLinks();
  links.value = res.data;
};
</script>

<template>
  <div class="container">
    <div class="title">友情链接</div>
    <div class="links">
      <div class="links-info">
        <h3>
          友联列表 <span>21条</span> <span>以下友链仅是时间排序，不分先后</span>
        </h3>
      </div>
      <div class="links-items">
        <linkCard v-for="link in links" :key="link.id" :link="link" />
      </div>
    </div>
    <div class="apply-condition">
      <div class="info">
        <h3>申请条件</h3>
      </div>
      <div class="content">
        <p>不接受贵站承接任何广告</p>
        <p>先友后链，申请前请先提前做好本站友情链接</p>
        <p>稳定更新，每月至少发布1篇 原创 文章</p>
        <p>凡内容污秽、暴力的、广告挂马的、违背社会主义核心价值观的勿扰</p>
      </div>
    </div>

    <div class="apply-format">
      <div class="info">
        <h3>申请格式</h3>
      </div>
      <div class="content">
        <p>博客名称：文一博客</p>
        <p>博客简介：一个专注技术分享的平台</p>
        <p>
          博客头像：<a
            >https://img.shiyit.com/9cf1222617fd4fa197991476a53cc883.jpg</a
          >
        </p>
        <p>博客地址：<a>https://www.shiyit.com</a></p>
      </div>
    </div>

    <div class="warning">
      <div class="info">
        <h3>无法访问或单方面取消❌</h3>
      </div>
      <p>
        不定时排查，长期不更新文章、无法访问或单方面取消，将会移除链接，恕不告知🧐
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
h3 {
  position: relative;
  &::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    content: "";
    top: -3px;
    margin-right: 8px;
    background-position: 50%;
    width: 20px;
    height: 20px;
    background-size: auto 100%;
    left: 0;
    background-image: url(../../assets/images/title-icon.png);
  }
}
.container {
  margin: 0 auto;
  margin-top: 20px;
  width: 80%;
  background: #fff;
  padding: 20px;
  transition: all .35s ease;
  border-radius: 5px;
  &:hover {
    box-shadow: 1px 1px 5px 5px rgba(49, 211, 162, 0.322) !important;
  }
  .title {
    font-size: 24px;
    color: #000;
    text-align: center;
    padding-top: 40px;
    margin-bottom: 15px;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-weight: 500;
  }
  .links {
    .links-info {
      margin-left: 10px;
      margin-top: 20px;
      h3 {
        font-weight: 500;
      }
      span {
        color: #909399;
        padding: 0 5px;
        height: 18px;
        font-size: 12px;
      }
    }
    .links-items {
      margin-top: 20px;
      display: grid;
      gap: 10px;
      margin-bottom: 30px;
      border-radius: 10px;
      align-content: space-evenly;
      grid-template-columns: repeat(4,minmax(180px,1fr));
      margin-left: 30px;
    }
  }
  // 申请条件
  .apply-condition {
    .info {
      h3 {
        margin-left: 10px;
        margin-top: 20px;
        line-height: 24px;
        font-weight: 500;
      }
    }
    .content {
      margin-left: 30px;
      p {
        margin-top: 10px;
      }
    }
  }
  // 申请格式
  .apply-format {
    .info {
      h3 {
        margin-left: 10px;
        margin-top: 20px;
        line-height: 24px;
        font-weight: 500;
      }
    }
    .content {
      margin-top: 20px;
      margin-bottom: 50px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      background: #1d72f320;
      border-left: 5px solid #1d72f3;
      color: #1d72f3;
      margin-left: 30px;
      p {
        padding: 5px 10px;
        a {
          color: #3a8ee6;
        }
      }
    }
  }

  .warning {
    .info {
      h3 {
        margin-left: 10px;
        margin-top: 20px;
        line-height: 24px;
        font-weight: 500;
      }
    }
    p {
      margin-left: 40px;
      color: red;
      margin-top: 10px;
    }
  }
}

@media screen and (max-width: 1024px) {
  .container {
    width: 100%;
    padding:0 10px;
    .links {
      .links-items {
        margin-left: 0px;
        grid-template-columns: repeat(2, 1fr) !important;
        :deep .link {
          .left {
            display: none;
          }
        }
      }
    }
  }
}
</style>
